| Conditions | 1 | 
| Paths | 12 | 
| Total Lines | 107 | 
| Lines | 0 | 
| Ratio | 0 % | 
| Changes | 1 | ||
| Bugs | 0 | Features | 0 | 
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | 'use strict';  | 
            ||
| 3 | define(['helper'], function (helper) { | 
            ||
| 4 | var self = this;  | 
            ||
| 5 | |||
| 6 | var ctx;  | 
            ||
| 7 | var transform;  | 
            ||
| 8 | |||
| 9 | var highlight;  | 
            ||
| 10 | |||
| 11 | const nonUplinkColor = '#F2E3C6';  | 
            ||
| 12 | const locationColor = '#00ff00';  | 
            ||
| 13 | const noLocationColor = '#0000ff';  | 
            ||
| 14 | const clientColor = 'rgba(230, 50, 75, 1.0)';  | 
            ||
| 15 | |||
| 16 | const cableColor = '#50B0F0';  | 
            ||
| 17 | const highlightColor = 'rgba(255, 255, 255, 0.2)';  | 
            ||
| 18 | |||
| 19 | const NODE_RADIUS = 15;  | 
            ||
| 20 | const LINE_RADIUS = 12;  | 
            ||
| 21 | |||
| 22 |   function drawDetailNode(d) { | 
            ||
| 23 |     if (transform.k > 1) { | 
            ||
| 24 | ctx.beginPath();  | 
            ||
| 25 | helper.positionClients(ctx, d, Math.PI, d.o.node.statistics.clients, 15);  | 
            ||
| 26 | ctx.fillStyle = clientColor;  | 
            ||
| 27 | ctx.fill();  | 
            ||
| 28 | ctx.beginPath();  | 
            ||
| 29 | var name = d.o.node_id;  | 
            ||
| 30 |       if (d.o.node && d.o.node.nodeinfo) { | 
            ||
| 31 | name = d.o.node.nodeinfo.hostname;  | 
            ||
| 32 | }  | 
            ||
| 33 | ctx.textAlign = 'center';  | 
            ||
| 34 | ctx.fillStyle = '#fff';  | 
            ||
| 35 | ctx.fillText(name, d.x, d.y + 20);  | 
            ||
| 36 | }  | 
            ||
| 37 | }  | 
            ||
| 38 | |||
| 39 |   function drawHighlightNode(d) { | 
            ||
| 40 |     if (highlight && highlight.type === 'node' && d.o.node === highlight.o) { | 
            ||
| 41 | ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI);  | 
            ||
| 42 | ctx.fillStyle = highlightColor;  | 
            ||
| 43 | ctx.fill();  | 
            ||
| 44 | ctx.beginPath();  | 
            ||
| 45 | }  | 
            ||
| 46 | }  | 
            ||
| 47 | |||
| 48 |   function drawHighlightLink(d, to) { | 
            ||
| 49 |     if (highlight && highlight.type === 'link' && d.o === highlight.o) { | 
            ||
| 50 | ctx.lineTo(to[0], to[1]);  | 
            ||
| 51 | ctx.strokeStyle = highlightColor;  | 
            ||
| 52 | ctx.lineWidth = LINE_RADIUS * 2;  | 
            ||
| 53 | ctx.lineCap = 'round';  | 
            ||
| 54 | ctx.stroke();  | 
            ||
| 55 | to = [d.source.x, d.source.y];  | 
            ||
| 56 | }  | 
            ||
| 57 | return to;  | 
            ||
| 58 | }  | 
            ||
| 59 | |||
| 60 |   self.drawNode = function drawNode(d) { | 
            ||
| 61 | ctx.beginPath();  | 
            ||
| 62 | |||
| 63 | drawHighlightNode(d);  | 
            ||
| 64 | |||
| 65 | ctx.moveTo(d.x + 3, d.y);  | 
            ||
| 66 | ctx.arc(d.x, d.y, 6, 0, 2 * Math.PI);  | 
            ||
| 67 | ctx.fillStyle = noLocationColor;  | 
            ||
| 68 |     if (d.o.node && d.o.node.nodeinfo && d.o.node.nodeinfo.location) { | 
            ||
| 69 | ctx.fillStyle = locationColor;  | 
            ||
| 70 | }  | 
            ||
| 71 | ctx.strokeStyle = nonUplinkColor;  | 
            ||
| 72 | ctx.lineWidth = 5;  | 
            ||
| 73 | ctx.globalAlpha = 1;  | 
            ||
| 74 | ctx.fill();  | 
            ||
| 75 | ctx.stroke();  | 
            ||
| 76 | |||
| 77 | drawDetailNode(d);  | 
            ||
| 78 | };  | 
            ||
| 79 | |||
| 80 |   self.drawLink = function drawLink(d) { | 
            ||
| 81 | ctx.beginPath();  | 
            ||
| 82 | ctx.moveTo(d.source.x, d.source.y);  | 
            ||
| 83 | var to = [d.target.x, d.target.y];  | 
            ||
| 84 | |||
| 85 | to = drawHighlightLink(d, to);  | 
            ||
| 86 | |||
| 87 | ctx.lineTo(to[0], to[1]);  | 
            ||
| 88 | ctx.strokeStyle = d.o.type === 'Kabel' ? cableColor : d.color;  | 
            ||
| 89 |     if (d.o.type === 'fastd' || d.o.type === 'L2TP') { | 
            ||
| 90 | ctx.globalAlpha = 0.2;  | 
            ||
| 91 | ctx.lineWidth = 1.5;  | 
            ||
| 92 |     } else { | 
            ||
| 93 | ctx.globalAlpha = 0.8;  | 
            ||
| 94 | ctx.lineWidth = 2.5;  | 
            ||
| 95 | }  | 
            ||
| 96 | ctx.stroke();  | 
            ||
| 97 | };  | 
            ||
| 98 | |||
| 99 |   self.setCTX = function setCTX(newValue) { | 
            ||
| 100 | ctx = newValue;  | 
            ||
| 101 | };  | 
            ||
| 102 |   self.setHighlight = function setHighlight(newValue) { | 
            ||
| 103 | highlight = newValue;  | 
            ||
| 104 | };  | 
            ||
| 105 |   self.setTransform = function setTransform(newValue) { | 
            ||
| 106 | transform = newValue;  | 
            ||
| 107 | };  | 
            ||
| 108 | return self;  | 
            ||
| 109 | });  | 
            ||
| 110 |